<template>
    <div class="box">
        <!-- Logo图片 -->
        <transition name="fade">
            <img src="@/assets/RyderLogo.png" v-show="show" />
        </transition>
        <!-- 遮罩层加载中 -->
        <transition name="fade-loading">
            <van-overlay :show="loading">
                <div class="wrapper">
                    <van-loading type="spinner" size="5vh" vertical color="#fff">加载中...</van-loading>
                </div>
            </van-overlay>
        </transition>

        <!-- 弹窗 -->
        <van-popup :show="showCompany" round position="bottom" duration="0.5">
            <van-picker title="请选择公司" :columns="companyColumns" @confirm="onCompany"
                :columns-field-names="customFieldName" cancel-button-text=" " :loading="loadingCompany"
                :visible-item-count="4" />
        </van-popup>

        <van-popup :show="showRyderNo" round position="bottom" duration="0.5">
            <van-form @submit="onSubmit" style="margin-top: 3vh;">
                <van-cell-group inset>
                    <van-field v-model="RYD_RyderNo" name="RYD_RyderNo" label="工号" placeholder="不够6位数前面补0"
                        :rules="[{ required: true, message: '请填写工号' }, { pattern, message: '请输入6位数字，不够6位前面补0' }]" />
                    <van-field v-model="ID" name="ID" label="身份证后六位" placeholder="请填写身份证后六位"
                        :rules="[{ required: true, message: '请填写身份证后六位' }, { pattern: patternID, message: '请输入正确的身份证后六位' }]" />
                </van-cell-group>
                <div style="margin: 5vw;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>

        </van-popup>

    </div>
</template>

<script>
export default {
    name: 'AndroidLoading',
}
</script>

<script setup>
import { onMounted, ref } from "vue";
import axios from "@/utils/axios";
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant';

const router = useRouter();
const route = useRoute();
//工号
let RYD_RyderNo = ref();
//身份证后六位
let ID = ref();
//获取wxid

let RYD_UserId = '';
let RYD_WxNo = '';

var RYD_DemandId = '';

var ContingencyPlanId = '';

//加载中遮罩层
let loading = ref(false);
//Logo图片显示
let show = ref(false);
//选择公司弹窗
let showCompany = ref(false);
//选择公司加载图标
let loadingCompany = ref(true);
//公司列表
let companyColumns = ref();
//设置公司弹窗自定义列
const customFieldName = {
    text: 'ryD_CompanyName',
    value: 'ryD_CompanyNo'
};
//选择公司弹窗
let showRyderNo = ref(false);
//正则校验工号是否为6位数
let pattern = /^\d{6}$/;
//正则校验身份证后六位是否为6位数
let patternID = /^((\d{6})|(\d{5}\w))$/;


if (route.query != null) {
    if (route.query.code == null || route.query.code == "") {
        router.back();
    }
    if (route.query.RYD_DemandId != null && route.query.RYD_DemandId != "") {
        RYD_DemandId = route.query.RYD_DemandId;
        sessionStorage.setItem('RYD_DemandId', RYD_DemandId)
    }
    if (route.query.ContingencyPlanId != null && route.query.ContingencyPlanId != "") {
        ContingencyPlanId = route.query.ContingencyPlanId;
        sessionStorage.setItem('ContingencyPlanId', ContingencyPlanId)
    }
    const code = route.query.code;
    var type = route.query.rType;
    loading.value = true;
    var url = '';
    if (type == undefined) {
        url = "/api/GetWxNo?code=" + code;
    } else {
        url = "/api/GetWxNo?code=" + code + "&type=" + type;
    }
    axios({
        method: 'get',
        url: url
    }).then(res => {
        if (res == "") {
            if (route.query.RYD_DemandId != null || route.query.ContingencyPlanId != null) {
                router.back();
            }
            Toast.fail({ overlay: true, message: '错误', duration: 0 })
        } else {
            RYD_WxNo = res;
            inspect();
        }
    }).catch(() => {
        Toast.fail({ overlay: true, message: '错误', duration: 0 })
    })
} else {
    router.back();
}
//显示加载中的遮罩层
onMounted(() => {
    show.value = true;
})

//检查当前WxId是否注册过、是否选择公司、是否填写工号

function inspect() {
    axios({
        method: 'get',
        url: "/api/Inspect?RYD_WxNo=" + RYD_WxNo
    }).then(res => {
        RYD_UserId = res[1];
        sessionStorage.setItem("RYD_UserId", RYD_UserId);
        sessionStorage.setItem("token", res[2]);
        switch (res[0]) {
            case "RYD_Company":
                loading.value = false;
                showCompany.value = true;

                axios({
                    method: 'get',
                    url: '/api/SetCompany',
                }).then(res => {
                    companyColumns.value = res;
                    loadingCompany.value = false;
                })

                break;
            case "RYD_RyderNo":
                loading.value = false;
                showRyderNo.value = true;
                break;
            default:
                if (RYD_DemandId != null && RYD_DemandId != "") {
                    router.push({
                        name: "AndroidDemandInfo", query: {
                            RYD_DemandId
                        }
                    });
                    break;
                }
                if (ContingencyPlanId != null && ContingencyPlanId != "") {
                    router.push({
                        name: "ShowContingencyPlan", query: {
                            ContingencyPlanId
                        }
                    });
                    break;
                }
                if (null != route.query.system && "" != route.query.system) {
                    if (route.query.system == 'canteen') {
                        location.replace("http://szcr.ryderems.com:8117/#/?RYD_UserId=" + res[1] + "&token=" + res[2] + "&RYD_WxNo=" + RYD_WxNo);
                        break;
                    } else if (route.query.system == 'canteenxf') {
                        location.replace("http://szcr.ryderems.com:8127/#/?RYD_UserId=" + res[1] + "&token=" + res[2] + "&RYD_WxNo=" + RYD_WxNo);
                        break;
                    }
                }
                router.push({ name: "AndroidHomePage" });
                break;
        }

    }).catch(err => {
        Toast.fail({ overlay: true, message: '错误' })
    })
}

//选择公司
function onCompany(selectedValues) {
    axios({
        method: 'Put',
        url: "/api/SetCompany",
        data: {
            ...selectedValues,
            ryD_UserId: RYD_UserId
        }
    }).then(res => {
        if (res == true) {
            showCompany.value = false;
            inspect();
        } else {
            Toast.fail({ overlay: true, message: '错误' })
        }
    }).catch(err => {
        Toast.fail({ overlay: true, message: '错误' })
    })

}
//工号和身份证后六位检测
function onSubmit(values) {
    values.RYD_ID = RYD_UserId
    axios({
        method: 'post',
        url: "/api/Inspect",
        data: {
            ...values
        }
    }).then(res => {
        if (res == true) {
            router.push({ name: "AndroidHomePage" });
        } else {
            Toast.fail({ overlay: true, message: '错误' })
        }
    }).catch(err => {
        Toast.fail({ overlay: true, message: '错误' })
    })

}
</script>

<style scoped>
/* 页面样式 */
.box {
    text-align: center;
    --van-picker-title-font-size: 1.2em;
    --van-picker-action-font-size: 1em;
    --van-picker-option-font-size: 1.2em;
}

img {
    width: 80vw;
    margin-top: 35vh;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 过渡效果 */
.fade-enter-active,
.fade-leave-active {
    transition: all 2s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-loading-enter-active,
.fade-loading-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-loading-enter-from,
.fade-loading-leave-to {
    opacity: 0;
}
</style>
